﻿
<MudPaper Height="200px" Style="overflow:hidden; position:relative;">
    <MudDrawerContainer Class="mud-height-full">
        <MudDrawer @bind-Open="@_open" Elevation="0" Variant="@DrawerVariant.Persistent" Color="Color.Primary">
            <MudDrawerHeader>
                <MudText Typo="Typo.h6">My App</MudText>
            </MudDrawerHeader>
            <MudPaper Height="2000px" Square="true">
                <MudSelect Style="margin-top:100px;" T="string" Label="Coffee" AnchorOrigin="Origin.BottomLeft">
                    <MudSelectItem Value="@("Cappuccino")" />
                    <MudSelectItem Value="@("Cafe Latte")" />
                    <MudSelectItem Value="@("Espresso")" />
                </MudSelect>
                <MudNavMenu>
                    <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard" IconColor="Color.Inherit">Dashboard</MudNavLink>
                    <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.LocalLibrary" IconColor="Color.Inherit">Library</MudNavLink>
                    <MudNavLink Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.People" IconColor="Color.Inherit">Community</MudNavLink>
                </MudNavMenu>
            </MudPaper>
        </MudDrawer>
        <div class="d-flex justify-center align-center mud-height-full">
            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@ToggleDrawer">Persistent drawer</MudButton>
        </div>
    </MudDrawerContainer>
</MudPaper>

@code {
    public static string __description__ = "A MudSelect inside a Drawer that stays fixed when scrolled";

    private bool _open = false;

    private void ToggleDrawer()
    {
        _open = !_open;
    }
}
